<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./css/bootstrap.min.css">
	<style>
		.main {
			width: 500px;
			height: 455px;
			margin: 0 auto;
			padding: 8px;
			background-color: #fff;
			border-radius: 8px;
			border: #ddd solid 1px;
		}

		.wrap {
			position: relative;
			-webkit-transition: .5s;
			transition: .5s;
		}

		.fake {
			background-color: #eee;
			height: 350px;
			margin: 0 auto;
			opacity: .7;
			position: relative;
			-webkit-transition: .3s;
			transition: .3s;
			cursor: pointer;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			border-radius: 8px;
			background-position: center center;
			background-size: auto auto;
		}


		.fake::after {
			content: 'Please Click Here ! ! ';
			white-space: nowrap;
			color: #333;
			text-align: center;
			position: absolute;
			top: 88%;
			left: 50%;
			-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
			font-size: 42px;
			z-index: 0;
		}

		.fake-off::after {
			display: none;
		}

		.fake input[type=file] {
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			cursor: pointer;
		}

		.input-group {
			margin-top: 8px;
		}

		.loading {
			width: 100%;
			padding-left: 8px;
			padding-right: 8px;
			position: absolute;
			top: 50%;
			margin-top: -71px
		}

		.loading-gif {
			margin-bottom: 12px;
		}

		.close-group {
			margin-top: 8px;
		}

		.btn-setting {
			background-color: transparent;
			border: 0 none;
		}
	</style>
</head>

<body>
	<section class="main">
		<div class="wrap">
			<div class="fake">
				<form id="tietuku" enctype="multipart/form-data">
					<input id="tietuku-pic" type="file" name="file">
					<input name="Token" type="hidden" id="Token" value="" />
				</form>

				<div class="loading text-center" style="display: none;">
					<img class="loading-gif" src="img/loading.gif" alt="loading..">
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
						 style="width: 0%">
						</div>
					</div>
				</div>
			</div>


			<div class="input-group">
				<input id="picture-link" spellcheck="false" type="text" class="form-control" placeholder="The link to picture (=´ω｀=)">
				<span class="input-group-btn">
					<button id="Copy" class="btn btn-default" type="button" data-clipboard-target="#picture-link">Copy!</button>
				</span>
			</div>

			<div class="close-group text-center">
				<button id="close" class="btn btn-danger" type="botton">Close~ ❥(^_-)</button>
				<button id="token-setting" class="btn-setting pull-right" type="button">
					<img src="">
				</button>
			</div>
		</div>
	</section>

	<script src="js/lib/clipboard.js"></script>
	<script src="js/lib/jquery.js"></script>
	<script src="js/lib/bootstrap.min.js"></script>
	<script src="js/main.js"></script>
</body>

</html>